<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./jquery.js"></script>
</head>
<style>
    body{
        position: relative;
        overflow: hidden;
    }
    .box img {
        width: 100px;
        /* height: 170px; */
    }
    #m {
        width: 520px;
        position: absolute;
        /* top: 10%; */
        left: 72%;
    }
</style>

<body>
    <div class="box">
        <img src="/img/1.png" alt="">
        <img src="/img/2.png" alt="">
        <img src="/img/3.jpg" alt="">
        <img src="/img/4.jpg" alt="">
        <img src="/img/5.jpg" alt="">
    </div>
    <img src="/img/1.png" alt="" id="m">
</body>
<script>
    $(function () {
        $('#m').hide()
    })
    $('.box img').click(function () {
        $('#m').stop().show().css({left:'72%'})
        $('#m').attr('src', $(this).attr('src')).animate({ left: '100px' ,}, 3000).show()
    })
</script>

</html>